<template>
  <div v-if="skipfoodslist">
    <van-sticky>
      <div class="foodrank">
        <span @click="$router.go(-1)"
          ><img src="../assets/image/ic_back_dark_center.png" alt=""
        /></span>
        <span>食物榜单</span>
      </div>
    </van-sticky>

    <div class="head">
      <div class="til">{{ skipfoodslist.title }}</div>
      <p>{{ skipfoodslist.description }}</p>
    </div>

    <div class="list">
      <ul>
        <li
          v-for="(item, index) in skipfoodslist.foods"
          :key="item.id"
          @click="$router.push({ path: '/dlzong' })"
        >
          <div class="listtitleindex">
            {{ index + 1 }}
          </div>
          <div class="listimg">
            <van-image
              width="65"
              height="65"
              radius="15"
              :src="item.thumb_image_url"
            />
          </div>
          <div class="listtitle">
            <div>
              {{ item.name }}
            </div>
            <div>
              <span>{{ danwei }}:</span>
              <!-- <span>{{ skipfoodslist.show_column }}</span> -->
              <span style="color: red"
                >{{ item[skipfoodslist.show_column] }}
              </span>
              <span>{{ skipfoodslist.unit }}</span>
              <span v-if="skipfoodslist.show_column !== 'gi'"
                >/{{ item.weight }}克</span
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      skipfoodslist: null,
      list: [
        {
          id: "gi",
          danwei: "GI",
        },
        {
          id: "calory",
          danwei: "热量",
        },
        {
          id: "protein",
          danwei: "高蛋白",
        },
        {
          id: "fiber_dietary",
          danwei: "膳食纤维",
        },
        {
          id: "folacin",
          danwei: "叶酸",
        },
        {
          id: "calcium",
          danwei: "钙",
        },
        {
          id: "zinc",
          danwei: "锌",
        },
        {
          id: "purine",
          danwei: "嘌呤",
        },
        {
          id: "iron",
          danwei: "铁",
        },
        {
          id: "kalium",
          danwei: "钾",
        },
        {
          id: "cholesterol",
          danwei: "胆固醇",
        },
        {
          id: "lactoflavin",
          danwei: "维生素B2",
        },
        {
          id: "natrium",
          danwei: "钠",
        },
        {
          id: "n3fa",
          danwei: "n-3脂肪酸",
        },
        {
          id: "vitamin_c",
          danwei: "维生素C",
        },
        {
          id: "vitamin_e",
          danwei: "维生素E",
        },
        {
          id: "saturated_fat",
          danwei: "饱和脂肪(酸)",
        },
        //
        //
        //
      ],
      danwei: "444",
    };
  },
  computed: {},
  created() {
    this.axios
      .get(
        `https://food.boohee.com/fb/v1/food_rankings/${this.$route.query.id}.json`
      )
      .then((res) => (this.skipfoodslist = res.data))
      .then(() => {
        this.list.forEach((item) => {
          if (item.id == this.skipfoodslist.show_column) {
            this.danwei = item.danwei;
          }
        });
      });
  },
};
</script>

<style lang="less" scoped>
.foodrank {
  width: 100%;
  display: flex;
  align-items: center;
  background: white;
  margin-bottom: 21px;
  // border-bottom: 1rpx solid gray;
  span {
    &:nth-of-type(1) {
      // margin-top: 2px;
      padding-left: 3px;
      img {
        padding-top: 4px;
        width: 30px;
        height: 30px;
      }
    }
    &:nth-of-type(2) {
      height: 100%;
      font-size: 17px;
    }
  }
}
.head {
  padding: 0 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(233, 232, 232, 0.767);
  box-shadow: 0 0 -2px -5px;
  .til {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  p {
    color: #c1c3ce;
    font-size: 14px;
  }
}
.list {
  width: 100%;
  margin-top: 30px;
  padding: 0 20px;
  ul {
    width: 100%;
    li {
      position: relative;
      display: flex;
      // background: red;
      align-items: center;
      // .listimg {
      // }
      .listtitleindex {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        background: #fed039;
        z-index: 1;
        text-align: center;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        // text-align: center;
      }
      .listtitle {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>